<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="../../favicon.ico">

    <title>Dev Tools For Free Software China</title>

    <!-- Bootstrap core CSS -->
    <link href="../../dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <link href="../../assets/css/ie10-viewport-bug-workaround.css" rel="stylesheet">
    <link href="../../assets/css/highlight/github.css" rel="stylesheet">
    <!-- Custom styles for this template -->
    <link href="../../css/navbar.css" rel="stylesheet">

    <!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
    <!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
    <script src="../../assets/js/ie-emulation-modes-warning.js"></script>
    <script src="https://cdn.bootcss.com/json3/3.3.2/json3.min.js"></script>
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>

<body>

<div class="container">
<#include  "../header.ftl"/>


    <!-- Main component for a primary marketing message or call to action -->
    <div class="jumbotron">
        <p> <textarea class="form-control" id="rawjson" rows="10"></textarea>  </p>
        <p>
            <a class="btn btn-lg btn-primary" href="#" onclick="formatjson()" role="button">格式化</a>
        </p>
        <div  id="result">
            <pre>
                <code id="codelang">
                 </code>
            </pre>
        </div>
    </div>

</div>


<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
  <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>">
<script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>
<script src="../../dist/js/bootstrap.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
<script src="../../assets/js/showdown/showdown.js"></script>
<script src="../../assets/js/highlight/highlight.pack.js"></script>
<script>
    function isJson(jsonStr){
        if (typeof jsonStr == 'string') {
            try {
                JSON.parse(jsonStr);
                return true;
            } catch(e) {
                console.log(e);
                return false;
            }
        }
    }
   function formatjson() {

       var text = $("#rawjson").val();; //获取json格式内容
       if(!isJson(text)){
           alert("输入格式有误！")
       }
       var result = JSON.stringify(JSON.parse(text), null, 2);//将字符串转换成json对象
       var highCode = hljs.highlightAuto(result).value;

       console.log(highCode);
       $("#codelang").html(highCode);
//       $("#codelang").val(result);
//       $("#formatjson").val(result);
//       var prestr="```json\r\n";
//       var endstr="```\r\n"
//       result=prestr+result+"\r\n"+endstr;
//       var converter = new showdown.Converter();
//       //进行转换
//
//        var result = converter.makeHtml(result);
//        console.log(result);
//       var highCode = hljs.highlightAuto(result).value;
//       console.log(highCode);
//
//       document.getElementById("result").innerHTML = highCode;


//       $("json language-json").html(highCode);


   }  ;

    //jQuery实现textarea高度根据内容自适应
    /*$.fn.extend({
        txtaAutoHeight: function () {
            return this.each(function () {
                var $this = $(this);
                if (!$this.attr('initAttrH')) {
                    $this.attr('initAttrH', $this.outerHeight());
                }
                setAutoHeight(this).on('input', function () {
                    setAutoHeight(this);
                });
            });
            function setAutoHeight(elem) {
                var $obj = $(elem);
                return $obj.css({ height: $obj.attr('initAttrH'), 'overflow-y': 'hidden' }).height(elem.scrollHeight);
            }
        }
    });

    //调用
    $(function () {
        $("#formatjson").txtaAutoHeight();
    });
*/

    function addFavorite2() {
        var url = window.location;
        var title = document.title;
        var ua = navigator.userAgent.toLowerCase();
        if (ua.indexOf("360se") > -1) {
            alert("由于360浏览器功能限制，请按 Ctrl+D 手动收藏！");
        } else if (ua.indexOf("msie 8") > -1) {
            window.external.AddToFavoritesBar(url, title);
            //IE8
        } else if (document.all) {
            try{ window.external.addFavorite(url, title);
            }catch(e){
                alert('您的浏览器不支持,请按 Ctrl+D 手动收藏!');
            }
        } else if (window.sidebar) {
            window.sidebar.addPanel(title, url, "");
        } else {
            alert('您的浏览器不支持,请按 Ctrl+D 手动收藏!'); } }
</script>
<script>
    /*高亮代码*/

    hljs.initHighlightingOnLoad();</script>
</body>
</html>
